<template>
    <div class="login">

<h1 v-if="$store.state.islogin">登录页面{{$store.state.username}}</h1>
<h1 v-else>请登录</h1>
                <div class="logins">
              <p> <span>用户名：</span>     <input type="text" v-model="user.username"></p>
               <p>  <span>密码：</span>     <input type="password" v-model="user.password"></p>
                <div>

                <button @click="login">登录</button>
                <button>注册</button>
                </div>
                </div>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return  {
            user:{
                username:'',
                password:''
            }
            }
        },
        methods:{
            login(){
               
                this.axios.post('/api/login',{
                    ...this.user
                })
                .then(res=>{
                    console.log(this.user);
                    if(res.data.status){
                    localStorage.setItem('token',res.data.token)    
                    this.$store.commit('changename',{
                        username:this.user.username,
                        isLogin:true,
                        token:res.data.token
                    })
                    this.$router.push({
                        name:'Home'
                    })}
                    else{
                        console.log('错误');
                    }
                })
                
            }
        }
    }
</script>

<style lang="less" scoped>
.login{
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background-color: black;
    background-image: url('../assets/1111254.jpg');
    background-position: center;
    background-size: cover;
}
.logins{
    width: 400px;
    height: 400px;
    position: relative;
    padding: 20px;
    margin: 100px auto;
    display: flex;
    // justify-content: center;
    align-items: center;
    flex-direction: column;
   
    // justify-items: center;
    background-color: rgba(0, 0, 0, 0.1);
    p{
      
        height: 40px;
        input{
            height: 40px;
            line-height: 40px;
            padding: 10px;
            width: 200px;
            box-sizing: border-box;
        }
    }
    div{width: 300px;
        display: flex;
        margin-top: 80px;
        justify-content: space-between;
        button{
            // display: inline-block;
                width:115px;
                height: 40px;
                // position: absolute;
    
                line-height: 40px;
            }
    }
}
</style>